<template>
	<view class="content">
    <my-status></my-status>
    <my-icon></my-icon>
    <image :src="coverData.image_url" mode="aspectFill"/>
    <view class="title-box">
      <text>{{coverData.title}}</text>
      <text>{{coverData.title_en}}</text>
    </view>
	</view>
</template>
<script>
  import goodApi from "@/apis/goodApi.js"
  import {mapMutations,mapState} from "vuex"
	export default {
    data(){
      return{
        // coverData:"",
        goodMap:{
          language:"cn",
          platform:"pc",
          token:"0",
          ver:"0.5.0"
        }
      }
    },
    computed:{
      ...mapState("style",["classifyList","coverData"])
    },
    methods:{
      ...mapMutations("style",["setClassifyList","setCoverData"]),
      async getGoodInfo(){
      
        if(JSON.stringify(this.coverData)!=='{}' && JSON.stringify(this.classifyList)!=='[]')return
          const {data:res} = await goodApi.getRecommandGoods(this.goodMap)
          this.setClassifyList(res.data.goods_type_list)
          this.setCoverData(res.data.recommend_list[0])
      }
    },
	created() {
		this.getGoodInfo()
	}
	}
</script>

<style lang="scss" scoped>
 
.content{  
  display: flex;
  justify-content: center;
  position: relative;
  height: 100%;
  image{
    height: 100%;
    width: 100%;
  }

  .title-box{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom:20%;
    color:#fff;
    font-size: 25px;
    font-weight: 200;
  }
}
</style>
